import React, {useState} from 'react';
import './App.css'
import FileSearch from './components/FileSearch'
import 'bootstrap/dist/css/bootstrap.css'
import FileList from "./components/FileList";
import defaultFiles from "./utils/defaultFile";
import BottomBtn from "./components/BottomBtn";
import {faPlus, faFileImport} from "@fortawesome/free-solid-svg-icons";
import TabList from "./components/TabList";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";

function App() {

    //define global state
    const [files, setFiles] = useState(defaultFiles)
    const [activeFileID, setActiveFileID] = useState('')
    const [openFileIDs, setOpenedFileIDs] = useState([])
    const [unsavedFileIDs, setUnsavedFileIDs] = useState([])



    const openedFiles = openFileIDs.map(openID => {
        return files.find(file => file.id === openID)
    })

    const activeFile = files.find(file => file.id === activeFileID)
    const fileClick = (fileID) => {
        setActiveFileID(fileID)
        if (!openFileIDs.includes(fileID)) {
            setOpenedFileIDs([...openFileIDs, fileID])
        }
    }


    //tablist  handle
    const tabClick = (fileID) => {
        setActiveFileID(fileID)
    }
    const tabClose = (fileID) => {
        const tabsWithout = openedFiles.filter(id => id != fileID)
        setOpenedFileIDs(tabsWithout)
        if (tabsWithout.length > 0) {
            setActiveFileID(tabsWithout[-1])
        } else {
            setActiveFileID('')
        }

    }




    const fileChange = (id, value) => {
        const newFiles = files.map(
            files => {
                if (file.id === id) {
                    file.body = value
                }
                return file
            }
        )
        setFiles(newFiles)
        if (!unsavedFileIDs.includes(id)) {
            setUnsavedFileIDs([...unsavedFileIDs, id])
        }

    }


    return (
        <div className="App container-fluid px-0">
            <div className="row">
                <div className="col-3  left-panel mr-0 pr-0">
                    <FileSearch
                        title="我的云文档"
                        onFileSearch={
                            (value) => {
                                console.log(value)
                            }

                        }
                    />

                    <FileList
                        files={files}
                        onFileClick={(id) => {
                            fileClick(id)
                        }}
                        onFileDelete={(id) => {
                            console.log(id)
                        }}
                        onSaveEdit={(id, newValue) => {
                            console.log(id)
                            console.log(newValue)
                        }}

                    />
                    <div className="row no-gutters">
                        <div className="col">
                            <BottomBtn
                                text="新建"
                                colorClass="btn-primary"
                                icon={faPlus}
                                onBtnClik={
                                    () => {
                                        console.log("新建")
                                    }

                                }
                            />
                        </div>
                        <div className="col">
                            <BottomBtn
                                text="导入"
                                colorClass="btn-success"
                                icon={faFileImport}
                            />
                        </div>

                    </div>


                </div>
                <div className="col-9  right-panel">
                    {!activeFile &&
                    <div
                        className="start-page"
                    >
                        选择或者创建新的 markdown 文档
                    </div>
                    }

                    {
                        activeFile &&
                        <>
                            <TabList
                                unsaveIds={unsavedFileIDs}
                                files={openedFiles}
                                activeId={activeFileID}
                                onTabClick={(id) => {
                                    tabClick(id)
                                }}
                                onCloseTab={
                                    tabClose
                                }
                            />
                            <SimpleMDE
                                key={activeFile && activeFile.id}
                                value={activeFile && activeFile.body}
                                onChange={(value => {
                                    console.log(value)
                                })}
                                options={{
                                    minHeight: '515px'
                                }}

                            />
                        </>
                    }


                </div>
            </div>
        </div>
    );
}


export default App;
